<template>
	<div>
		<el-row class="grid-content bg-purple-dark" >
		  <el-col :span="1">
			   <span class="el-icon-search" style="margin-top: 15px;"></span>
		  </el-col>
		  <el-col :span="2" style="margin-top: 10px;">
			  筛选查询
		  </el-col>
		  <el-col :span="9"><div class="grid-content bg-purple"></div></el-col>
		  <el-col :span="2" style="margin-top: 10px;">
		  	  模糊条件
		  </el-col>
		  <el-col :span="5" style="margin-top: 5px;margin-bottom: 5px;">
			  <el-input v-model="userinfo" placeholder="请输入员工姓名、员工编号查询" size="medium" :clearable=true @clear="alluser()"></el-input>
		  </el-col>
		  <el-col :span="1" style="margin-top: 5px;margin-bottom: 5px;margin-left: 20px;">
			  <el-button type="info" size="small" @click="findUserByinfor()">查询</el-button>
		  </el-col>
		  <el-col :span="1" style="margin-top: 5px;margin-bottom: 5px;margin-left: 20px;">
		  	  <el-button type="info" size="small" @click="adduser()">新增</el-button>
		  </el-col>
		  <el-col :span="1" style="margin-top: 5px;margin-bottom: 5px;margin-left: 20px;">
		  	  <el-button type="info" size="small" @click="removemany()">删除</el-button>
		  </el-col>
		</el-row>

		<el-dialog title="新增用户" :visible.sync="isaddnewuser" width="30%" >
		  <el-form :model="newuser" :rules="addrules">
		    <el-form-item label="用 户 名 " prop="uname">
				<el-col :span="18" style="margin-left: 5px;">
					<el-input v-model="newuser.uname" autocomplete="off"></el-input>
				</el-col>
		    </el-form-item>
		    <el-form-item label="登录账号"  prop="account">
		    	<el-col :span="18">
		    		<el-input v-model="newuser.account" autocomplete="off"></el-input>
		    	</el-col>
		    </el-form-item>
			<el-form-item label="登录密码"  prop="psw">
				<el-col :span="18">
					<el-input v-model="newuser.psw" autocomplete="off" type="password"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label=" 性  别 " style="margin-left: 6px;"  prop="ugen">
				<el-col :span="18">
					<el-input v-model="newuser.ugen" autocomplete="off" style="margin-left: 20px;"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="联系方式"  prop="utel">
				<el-col :span="18">
					<el-input v-model="newuser.utel" autocomplete="off"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="电子邮箱"  prop="uemail">
				<el-col :span="18">
					<el-input v-model="newuser.uemail" autocomplete="off"></el-input>
				</el-col>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="savenewuser()">提 交</el-button>
		  </div>
		</el-dialog>

		<el-dialog title="修改用户信息" :visible.sync="ischangeuser" width="30%">
		  <el-form :model="thisuser" :rules="changerules">
		    <el-form-item label="用 户 名 " prop="uname">
				<el-col :span="18" style="margin-left: 5px;">
					<el-input v-model="thisuser.uname" autocomplete="off"></el-input>
				</el-col>
		    </el-form-item>
		    <el-form-item label="登录账号" prop="accountUsername">
		    	<el-col :span="18">
		    		<el-input v-model="thisuser.accountUsername" autocomplete="off"></el-input>
		    	</el-col>
		    </el-form-item>
			<el-form-item label="登录密码" prop="psw">
				<el-col :span="18">
					<el-input v-model="thisuser.psw" autocomplete="off" type="password"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label=" 性  别 " style="margin-left: 6px;" prop="ugender">
				<el-col :span="18">
					<el-input v-model="thisuser.ugender" autocomplete="off" style="margin-left: 20px;"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="联系方式" prop="utel">
				<el-col :span="18">
					<el-input v-model="thisuser.utel" autocomplete="off"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="电子邮箱" prop="uemail">
				<el-col :span="18">
					<el-input v-model="thisuser.uemail" autocomplete="off"></el-input>
				</el-col>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="savechange()">提 交</el-button>
		  </div>
		</el-dialog>

		<el-dialog title="授予权限" :visible.sync="isgivepower" width="30%">
		  <el-form :model="userpower">
		    <el-form-item label="用户权限：">
				<el-col :span="24">
					<el-radio-group v-model="userpower.roles">
						<el-radio  v-for="(uro,index) in uroles" :key="index" size="medium" :label="uro.roleId">{{uro.roleName}}
						</el-radio>
					  </el-radio-group>
				</el-col>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="savepower()">保 存</el-button>
		  </div>
		</el-dialog>

		<el-dialog
		  title="修改权限"
		  :visible.sync="changepower"
		  width="30%">
		  <span>确定修改权限？</span>
		  <span slot="footer" class="dialog-footer">
			  <el-button type="primary" @click="changepower=false">  否  </el-button>
		      <el-button type="primary" @click="ischange()">  是  </el-button>
		  </span>
		</el-dialog>

		<el-dialog
		  title="删除用户"
		  :visible.sync="isremovuser"
		  width="30%">
		  <span>是否删除此用户？</span>
		  <span slot="footer" class="dialog-footer">
			  <el-button type="primary" @click="isremovuser=false">  否  </el-button>
		      <el-button type="primary" @click="doremove()">  是  </el-button>
		  </span>
		</el-dialog>

		<el-dialog
		  title="删除用户"
		  :visible.sync="iscloserone"
		  width="30%">
		  <span>删除成功</span>
		  <span slot="footer" class="dialog-footer">
		      <el-button type="primary" @click="closeone()">确定</el-button>
		  </span>
		</el-dialog>

		<el-dialog
		  title="删除用户"
		  :visible.sync="isclosermove"
		  width="30%">
		  <span>删除成功</span>
		  <span slot="footer" class="dialog-footer">
		      <el-button type="primary" @click="closeremove()">确定</el-button>
		  </span>
		</el-dialog>

		<el-table
		    ref="multipleTable"
		    :data="allusers.reconds"
		    tooltip-effect="dark"
		    style="width: 100%"
		    @selection-change="handleSelectionChange">
		    <el-table-column
		      type="selection"
		      width="55"
			  align="center">
		    </el-table-column>
		    <el-table-column
		      prop="uid"
		      label="员工编号"
		      width="120"
			  align="center">
		    </el-table-column>
			<el-table-column
			  prop="accountUsername"
			  label="登陆账号"
			  width="120"
			  align="center">
			</el-table-column>
			<el-table-column
			  prop="uname"
			  label="姓名"
			  width="120"
			  align="center">
			</el-table-column>
			<el-table-column
			  prop="ugender"
			  label="性别"
			  width="120"
			  align="center">
			</el-table-column>
			<el-table-column
			  prop="utel"
			  label="联系方式"
			  width="200"
			  align="center">
			</el-table-column>
			<el-table-column
			  prop="uemail"
			  label="电子邮箱"
			  width="200"
			  align="center">
			</el-table-column>
			<el-table-column
			  prop="roleName"
			  label="系统身份"
			  width="100"
			  align="center">
			</el-table-column>
			<el-table-column
			      fixed="right"
			      label="操作"
				  align="center"
				  show-overflow-tooltip>
			      <template slot-scope="scope">
					<el-button type="text" size="small" @click="givepower(scope.row)">授权</el-button>
			        <el-button type="text" size="small" @click="changeuser(scope.row)">修改</el-button>
					<el-button type="text" size="small" @click="removeuser(scope.row)">删除</el-button>
			      </template>
			</el-table-column>
		  </el-table>

		  <el-pagination
		     @size-change="handleSizeChange"
		     @current-change="handleCurrentChange"
		     :current-page="allusers.pagenum"
		     :page-sizes="[1, 2, 3, 4]"
		     :page-size="allusers.pagesize"
		     layout="total, sizes, prev, pager, next, jumper"
		     :total="allusers.totals"
			 v-if="this.userinfo == '' || this.userinfo == null">
		  </el-pagination>

	</div>
</template>

<script>
	export default{
		name:'Usermanager',
		data(){
			return{
				allusers: {
				  pagenum: 0,
				  pagesize: 0,
				  reconds: [],
				  totals: 0
				},
				user:{},
				userinfo:'',
				users:[],
				isaddnewuser:false,
				newuser:{
					uname:'',
					account:'',
					psw:'',
					ugen:'',
					utel:'',
					uemail:''
				},
				ischangeuser:false,
				thisuser:[],
				isgivepower:false,
				userpower:{
					roles:''
				},
				uroles:[],
				changepower:false,
				isremovuser:false,
				multipleSelection:[],
				iscloserone:false,
				isclosermove:false,
				addrules:{
					uname:[
						{ required: true, message: '请输入用户名', trigger: 'blur' },
						{ min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
					],
					account:[
						{ required: true, message: '请输入账号', trigger: 'blur' },
						{ min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
					],
					psw:[
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					],
					ugen:[
						{ required: true, message: '请输入性别（男/女）', trigger: 'blur' }
					],
					utel:[
						{ required: true, message: '请输入联系方式', trigger: 'blur' },
						{ min: 8, max: 11, message: '长度在 8 到 11 个字符', trigger: 'blur' }
					],
					uemail:[
						{ required: true, message: '请输入电子邮箱', trigger: 'blur' },
						{ min: 7, max: 20, message: '长度在 7 到 20 个字符', trigger: 'blur' }
					]
				},
				changerules:{
					uname:[
						{ required: true, message: '请输入用户名', trigger: 'blur' },
						{ min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
					],
					accountUsername:[
						{ required: true, message: '请输入账号', trigger: 'blur' },
						{ min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
					],
					psw:[
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					],
					ugender:[
						{ required: true, message: '请输入性别（男/女）', trigger: 'blur' }
					],
					utel:[
						{ required: true, message: '请输入联系方式', trigger: 'blur' },
						{ min: 8, max: 11, message: '长度在 8 到 11 个字符', trigger: 'blur' }
					],
					uemail:[
						{ required: true, message: '请输入电子邮箱', trigger: 'blur' },
						{ min: 7, max: 20, message: '长度在 7 到 20 个字符', trigger: 'blur' }
					]
				},
			}
		},
		methods:{
			handleSizeChange(val) {
			  this.findAlluser(this.allusers.pagenum, val)
			},
			handleCurrentChange(val) {
			  this.findAlluser(val, this.allusers.pagesize)
			},
			handleSelectionChange(val) {
			   this.multipleSelection = val;
			},
			alluser(){
				this.findAlluser(this.allusers.pagenum,this.allusers.pagenum)
			},
			findAlluser(num,size){
				if(num>0 && size>0){
					let page = {
						pagenum:num,
						pagesize:size
					}
					this.$axios.post("user/getAlluser",page).then(resp=>{
						if(200 == resp.data.code){
							this.allusers.pagenum = resp.data.data.current
							this.allusers.pagesize = resp.data.data.size
							this.allusers.totals = resp.data.data.total
							this.allusers.reconds = resp.data.data.records
						}
					})
				}
			},
			findUserByinfor(){
				if(this.userinfo == '' || this.userinfo == null){
					alert("请输入查询信息")
					//this.findAlluser(this.allusers.pagenum,this.allusers.pagesize)
				}else{
					let s = {
						userinfo:this.userinfo
					}
					this.$axios.post("user/getuserByinfo",s).then(resp=>{
						if(200 == resp.data.code){
							this.allusers.reconds = resp.data.data
						}else{
							alert("未查询到该用户")
						}
					})
				}
			},
			adduser(){
				this.isaddnewuser=true
			},
			savenewuser(){
				if(this.newuser.uname != '' && this.newuser.account != '' && this.newuser.psw != '' && this.newuser.uemail != '' && this.newuser.ugen != '' && this.newuser.utel != ''){
					this.$axios.post("user/savenewuser",this.newuser).then(resp=>{
						if(200 == resp.data.code){
							this.isaddnewuser=false
							this.newuser.uname=''
							this.newuser.account=''
							this.newuser.psw=''
							this.newuser.uemail=''
							this.newuser.ugen=''
							this.newuser.utel=''
							this.findAlluser(this.allusers.pagenum,this.allusers.pagesize)
						}else{
							alert(resp.data.message)
						}
					})
				}else{
					alert("请输入完整信息")
				}
			},
			changeuser(s){
				this.thisuser = s
				this.ischangeuser = true
			},
			savechange(){
				if(this.thisuser != null){
					this.$axios.post("user/savechangeuser",this.thisuser).then(resp=>{
						if(200 == resp.data.code){
							this.ischangeuser=false
							this.thisuser=[]
							this.findAlluser(this.allusers.pagenum,this.allusers.pagesize)
						}else{
							alert(resp.data.message)
						}
					})
				}else{
					alert("请输入完整信息")
				}
			},
			givepower(s){
				this.thisuser=s
				this.$axios.post("roleModel/issave",this.thisuser).then(resp=>{
					if(200 == resp.data.code){
						this.isgivepower=true
					}else{
						this.changepower = true
					}
				})
			},
			ischange(){
				this.changepower=false
				this.isgivepower=true
			},
			getAllpowers(){
				this.$axios.post("roleModel/getAllRolemodel").then(resp=>{
					if(200 == resp.data.code){
						this.uroles = resp.data.data
					}
				})
			},
			savepower(){
				if(this.userpower.roles != '' && (this.thisuser.accountId != null || this.thisuser.accountId != '')){
					let s = {
						roles:this.userpower.roles,
						accountid:this.thisuser.accountId
					}
					this.$axios.post("accountRole/savepower",s).then(resp=>{
						if(200 == resp.data.code){
							alert("授权成功")
							this.isgivepower=false
							this.userpower.roles=[]
							this.findAlluser(this.allusers.pagenum,this.allusers.pagesize)
						}else{
							alert("授权失败，请稍后重试")
							this.userpower.roles=[]
						}
					})
				}
			},
			removeuser(s){
				this.thisuser=s
				this.isremovuser=true
			},
			doremove(){
				if(this.thisuser != null){
					this.$axios.post("user/removeuser",this.thisuser).then(resp=>{
						if(200 == resp.data.code){
							this.iscloserone=true
						}else{
							alert(resp.data.message)
						}
					})
				}
			},
			closeone(){
				this.iscloserone=false
				this.isremovuser=false
				this.findAlluser(this.allusers.pagenum,this.allusers.pagesize)
				this.thisuser=[]
			},
			removemany(){
				console.log(this.multipleSelection)
				if(this.multipleSelection.length >0){
					let s = {
						list:this.multipleSelection
					}
					this.$axios.post("user/removemany",s).then(resp=>{
						if(200 == resp.data.code){
							this.isclosermove=true
						}else{
							alert(resp.data.message)
						}
					})
				}else{
					alert("请选择删除用户")
				}
			},
			closeremove(){
				this.isclosermove=false
				this.multipleSelection=[]
				this.findAlluser(this.allusers.pagenum,this.allusers.pagesize)
			}
		},
		created() {
			this.findAlluser(1,2)
			this.getAllpowers()
		}
	}
</script>

<style>
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99aabf85;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
	  }
</style>
